<template>
<!--  客户开发计划    -->
  <div class="max">
    <div class="div1">
      <el-input v-model="Client.customerName" placeholder="客户名" class="el-input-1" />
      <el-input v-model="Client.createMan" placeholder="创建人" class="el-input-1" />
      <el-select v-model="Client.value_devResult" placeholder="请选择开发状态" class="el-input-1">
        <el-option v-for="item in Client.devResult" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-badge is-dot>
        <el-button type="primary" @click="searchData">
          <el-icon style="vertical-align: middle;">
            <search/>
          </el-icon>
          <span style="vertical-align: middle;"> 搜索 </span>
        </el-button>
      </el-badge>
      <el-tooltip placement="top">
        <template #content>清空搜索框</template>
        <el-button type="primary" @click="empty" style="margin-left: 20px">
          <el-icon>
            <refresh-left />
          </el-icon>
          <span style="vertical-align: middle;"> 重置 </span>
        </el-button>
      </el-tooltip>
    </div>
    <div class="div2">
      <div class="div3">
        <!--刷新表格-->
        <el-badge is-dot>
          <el-button circle @click="loadData(true)" style="margin-left: 20px;margin-top: -10px">
            <el-tooltip placement="top">
              <template #content>刷新表格</template>
              <el-icon>
                <refresh-left />
              </el-icon>
            </el-tooltip>
          </el-button>
        </el-badge>
        <!--导出-->
        <el-icon size="130%" style="width: 25px;border: 1px solid #DCDCDC;margin-left: 1250px" color="gray">
          <position />
        </el-icon>
        <!--打印-->
        <el-icon size="130%" style="width: 25px;border: 1px solid #DCDCDC;margin-left: 10px" color="gray">
          <printer />
        </el-icon>
      </div>
      <!--营销机会表-->
      <div class="div4">
        <el-table :data="t_sale_chance" border style="width: 100%; opacity: 0.7;" :header-cell-style="{textAlign: 'center'}"
                  v-loading="loading"
                  :element-loading-svg="svg"
                  class="custom-loading-svg"
                  element-loading-svg-view-box="-10, -10, 50, 50"
                  element-loading-text="正在加载数据"
                  :cell-style="{ textAlign: 'center' }">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column fixed label="编号" prop="id" width="100"></el-table-column>
          <el-table-column label="机会来源" prop="chanceSource" width="120"></el-table-column>
          <el-table-column label="客户名称" prop="customerName" width="120"></el-table-column>
          <el-table-column label="成功几率" prop="cgjl" width="120"></el-table-column>
          <el-table-column label="概要" prop="overview" width="120"></el-table-column>
          <el-table-column label="联系人" prop="linkMan" width="120"></el-table-column>
          <el-table-column label="联系电话" prop="linkPhone" width="120"></el-table-column>
          <el-table-column label="开发状态" prop="devResult" width="120">
            <template #default="s">
              <template v-if="s.row.devResult === 3">
                <el-tag type="danger">开发失败</el-tag>
              </template>
              <template v-if="s.row.devResult === 2">
                <el-tag type="success">开发成功</el-tag>
              </template>
              <template v-else-if="s.row.devResult === 1">
                <el-tag type="warning">开发中</el-tag>
              </template>
              <template v-else-if="s.row.devResult === 0">
                <el-tag type="info">未开发</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="description" width="120"></el-table-column>
          <el-table-column label="创建人" prop="createMan" width="120"></el-table-column>
          <el-table-column label="创建时间" prop="createDate" width="170"></el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template #default="xxx">
              <el-tooltip placement="top">
                <template #content>开发</template>
                <el-button size="mini" type="primary" circle @click="particulars(xxx.row)">
                  <el-icon>
                    <position />
                  </el-icon>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页控件 -->
        <el-pagination background layout="total, prev, pager, next, jumper" :current-page="no" :page-size="size"
                       :total="total" @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
    <Client-form @refresh-data="refreshData" ref="clientForm"/>
  </div>
</template>

<script>
import {defineComponent, ref} from 'vue'
import {getMarclientPageInfo} from "../../../network/marclient";
import ClientForm from "./form/ClientForm.vue";

export default {
  name: "MarClient",
  components: {ClientForm},
  data() {
    return {
      /*加载*/
      svg: `
          <path class="path" d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
        `,
      loading: false,
      Client:{
        customerName: ref(''), //客户名称
        createMan: ref(''), //创建人
        //选择开发状态
        devResult: [
          {

          },
          {
            value: 0,
            label: '未开发',
          },
          {
            value: 1,
            label: '开发中',
          },
          {
            value: 2,
            label: '已开发',
          },
          {
            value: 3,
            label: '开发失败',
          }
        ],
        value_devResult: null,
      },
      //分页
      t_sale_chance: [],
      no: 1,
      size: 8,
      total: 0,
    }
  },
  methods:{
    //重置清空
    empty(){
      Object.assign(this.Client,this.$options.data.call(this).Client);
      this.$notify({
        title: '成功',
        message: '清空成功',
        type: 'success',
      })
    },
    particulars(row){
      let frm = this.$refs.clientForm;
      frm.outerVisible=true;
      frm.saleChange = this.$utils.clone(row);
    },
    //刷新
    refreshData(){
      this.loadData(true);
    },
    //模糊查询
    searchData() {
      this.loadData(true);
      this.loadData();
    },
    //查询所有
    loadData(hint) {
      let params = {
        pageNum: this.no,
        pageSize: this.size,
        customerName: this.Client.customerName,
        createMan: this.Client.createMan,
        devResult: this.Client.value_devResult
      }
      //加载表数据
      if(hint){
        this.loading = true;
      }
      getMarclientPageInfo(params).then(data => {
        console.log('data:', data)
        this.t_sale_chance = data.list;
        this.total = data.total;
        setTimeout(() => {
          this.loading = false;
        }, 2000);
      })
    },/**/
    /*分页*/
    init() {
      this.loadData();
    },
    currentChange(n) {
      this.no = n;
      this.loadData();
    },/**/
  },
  /* 钩子函数 */
  created() {
    this.init();
  }
}
</script>

<style scoped>
.max{
  width: 100%;
  height: 640px;
  background-color: rgba(255, 255, 255, 255);
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  border-radius: 20px;
}
.div1 {
  width: 1170px;
  height: 25px;
  border: 0px solid black;
  padding: 30px 15px;
}

.el-input-1 {
  width: 180px;
  margin: 5px;
}

.div2 {
  width: 100%;
  height: 80%;
  border: 1px solid gainsboro;
  margin-top: 20px;

}

.div3 {
  width: 97%;
  height: 25px;
  border: 0px solid gainsboro;
  padding: 10px 15px;
}

.div4 {
  width: 100%;
  height: 70%;
  border: 0px solid gainsboro;
}

table {
  width: 1204px;
  border-collapse: collapse;
  border-spacing: 0;
}
.el-select-dropdown__item{
  width: 100%;
  color: darkgray;
}
/*加载*/
.custom-loading-svg .el-loading-mask > .el-loading-spinner > .circular {
  animation: none;
}
</style>
